import { PersonaSummary } from '@/lib/api/persona';

interface PersonaCardProps {
  persona: PersonaSummary;
  selectedSkill: string;
  onSkillChange: (skill: string) => void;
  onCreateSession: (personaId: string, skills: string[]) => void;
  isCreating?: boolean;
}

export function PersonaCard({ 
  persona, 
  selectedSkill, 
  onSkillChange, 
  onCreateSession, 
  isCreating = false 
}: PersonaCardProps) {
  const availableSkills = persona.skills.filter(skill => 
    ['storyteller', 'socratic_tutor', 'improv'].includes(skill)
  );

  const handleCreate = () => {
    const skill = availableSkills.includes(selectedSkill) ? selectedSkill : availableSkills[0];
    onCreateSession(persona.id, availableSkills);
  };

  return (
    <div className="rounded-xl border bg-white p-6 shadow-sm hover:shadow-md transition-shadow">
      {/* Header */}
      <div className="flex items-center gap-4 mb-4">
        <div className="h-12 w-12 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center">
          <span className="text-white font-semibold text-lg">
            {persona.displayName.charAt(0)}
          </span>
        </div>
        <div className="flex-1">
          <h3 className="font-semibold text-gray-900">{persona.displayName}</h3>
          <p className="text-sm text-gray-600">{persona.description || 'No description'}</p>
        </div>
      </div>

      {/* Skills */}
      <div className="mb-4">
        <div className="flex flex-wrap gap-2 mb-2">
          {availableSkills.map((skill) => (
            <span
              key={skill}
              className={`rounded-full px-3 py-1 text-xs font-medium transition-colors ${
                skill === selectedSkill
                  ? 'bg-blue-100 text-blue-800 border border-blue-200'
                  : 'bg-gray-100 text-gray-700 border border-gray-200'
              }`}
            >
              {skill === 'storyteller' ? 'Storyteller' :
               skill === 'socratic_tutor' ? 'Socratic Tutor' :
               skill === 'improv' ? 'Improv' : skill}
            </span>
          ))}
        </div>
      </div>

      {/* Actions */}
      <button
        disabled={isCreating || availableSkills.length === 0}
        onClick={handleCreate}
        className="w-full rounded-lg bg-blue-600 py-2.5 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
      >
        {isCreating ? (
          <>
            <svg className="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
            </svg>
            Creating...
          </>
        ) : (
          'Start Chat'
        )}
      </button>
    </div>
  );
}